import React from 'react';

export class App extends React.Component {
  // 定义事件处理函数
  clickHandler(e) {
    console.log('按钮2', e);
  }

  render() {
    return (
      <div>
        <div style={{ border: '1px solid red', padding: '16px' }}>
          div1
          <div
            id="div2"
            onClick={(e) => {
              console.log(
                e.eventPhase,
                e.target === e.currentTarget,
                e.target,
                e.currentTarget
              );
            }}
            style={{ border: '1px solid blue', padding: '16px' }}
          >
            div2
            <div
              id="div3"
              onClick={(e) => {
                console.log(e.eventPhase);
              }}
              onClickCapture={(e) => console.log('btn-捕获', e.eventPhase)}
              style={{ border: '1px solid pink', padding: '16px' }}
            >
              div3
            </div>
          </div>
        </div>
        <a
          onClick={(e) => {
            console.log(e);
            console.log('我跳转了吗');
            e.preventDefault();
          }}
          href="http://www.baidu.com"
        >
          点我
        </a>
      </div>
    );
  }
}
